*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

//归档主盒子

.archive-wrap{
    width: 100%;
    display: flex;
    margin: var(--pd20) 0;
}

//头部
.archive-wrap-head{
    width: 70%;
    background: var(--bg-color);
}

//左侧盒子
.archive-wrap-left{
    width: 100%;
    box-shadow: 0 0 0 0 #ccc;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
    color: var(--color);
   
}
   


//标题
.archive-wrap-title{
    padding-top: 20px;
    font-size: 30px;
    color: #ff0064;
    width: 100%;
    
}

//标题下篇数
.archive-wrap-num{
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding-bottom: 20px;
    span{
        color: #ff0064;
        font-size: 20px;
    }
}

//内容
.archive-wrap-conent{
    .year{
        font-size: 30px;
        font-weight: 700;
        margin: var(--mg20) 20px;
    }
    .mount{
        font-size: 25px;
        font-weight: 700;
        margin: 10px 40px;
    }
    .conent{
        margin: 20px 60px;
        font-size: 20px;
        line-height: 40px;
        li:hover{
            color:#ff0064;
            cursor: pointer;
        }
    }
}
//右侧
.archive-wrap-right{
    width: 30%;
    height: 100%;
    margin-left: var(--mg20);
    background: var(--bg-color);
    box-shadow:0 0 0 0 #fff;
}
// .wrap{
//   display: flex;
//   width:  100%;
//   margin: 20px auto;
//   .left{
//       width: 100%;
//       // background: yellow;
//       box-shadow: 0 0 0 1px #ccc;
//       background: #fff;
//       .head1{
//           width: 100%;
//           height: 100px;
//           float: left;
//           border-bottom: 1px solid;
//           display: flex;
//           flex-wrap: nowrap;
//           flex-direction: column;
//           justify-content: space-evenly;
//           .p1{
//               font-size: 15px;
//           }
//           b{
//               color: pink;
//           }
//           h2{
//               text-align: center;
//               margin-top: 20px;
//           }
//           .p1{
//               text-align: center;
//           }
         
//       }
//       .main{
//           width: 100%;
//           height: calc(100% - 100px);
//           margin-top: 100px;
//           flex-direction: column
//           var(--bg-color);
//           .time1{
//               height: 20px;
//               margin: 30px 40px;
//               font-size: 30px;
//           }
//           .title{
//               margin: 20px 60px;
//               font-size: 25px;
//           }
//           .con{
//               line-height: 46px;
//               margin: 0 100px;
//               font-size: 20px;
//               li:hover{
//                   color: red;
//                   cursor: pointer;
//                }
//           }
//       }
//   }
//   .right{
//       width: 30%;
//       height: 100%;
//       position: sticky;
//       top:10px;
     
     
//       // background: #efcf;
//       .rightbox1{
//           margin: 0px auto;
//           width: 90%;
//           background:#fff;
//           box-shadow: 0 0 0 2px #ccc;
//           .righttui{
//               width: 100%;
//               height: 50px;
//               border-bottom: 1px solid #ccc;
//               display: flex;
//               .tuiread{
//                   margin: 10px 10px;
//                   font-weight: 700;
//               }
//           }
//           .righttopcon{
//               width: 100%;
//               background:#fff;
//               .rightp{
//                  margin: 5px 10px;
//                  padding: 5px 10px;
                
//               }
//               .rightp:hover{
//                   color: red;
//                   cursor: pointer;
//                }
//           }
//       }
//       .rightbox2{
//           margin: 20px auto;
//           width: 90%;
//           height: 270px;
//           background:#ffff ;
//           box-shadow: 0 0 0 2px #ccc;
//       }
//   }
// }
// .on1{
//   color: pink;
//   cursor: pointer;
// }